<template>
  <border-box title="内容编辑">
    <span slot="titleRight" @click="visible = true">更多模版</span>
    <div class="item" v-for="(item,index) in contentList" :key="index">
      <img class="item-img" :src="item.logo||defaultImgUrl">
      <div style="flex:1">
        <div class="item-title">{{item.contentTitle}}</div>
        <div class="item-icons">
          <a-icon @click="showPreview(item)" type="eye" theme="twoTone"/>
          <a-icon @click="insert(item.content)" type="check-circle" theme="twoTone"/>
        </div>
      </div>
    </div>
    <preview ref="preview"></preview>
    <j-modal
      title="内容库"
      width="70%"
      :z-index="999"
      :visible.sync="visible"
      @ok="handleOk">
      <div class="table-page-search-wrapper search-box-cuesList" style="margin-bottom:10px">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="28">
            <a-col :xl="5" :lg="8" :md="7" :sm="26">
              <a-form-item label="标题">
                <a-input
                  v-model="queryParam.contentTitle"
                  placeholder="请输入标题"/>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="7" :md="6" :sm="6">
            <span style="float: left;overflow: hidden; margin-left:-40px" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search" title="搜索" shape="circle"></a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          rowKey="id"
          :columns="columns"
          :rowSelection="{type:'radio',selectedRowKeys:selectedRowKeys,onChange: onSelectChange}"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange">
          <template slot="操作" slot-scope="text,record">
            <a @click="showPreview(record)">预览</a>
          </template>
        </a-table>
      </div>
    </j-modal>
  </border-box>
</template>

<script>
  //内容编辑
  import BorderBox from "../BorderBox";
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction} from "@/api/manage";
  import Preview from "../preview/Preview";

  export default {
    name: "ContentEdit",
    mixins: [JeecgListMixin],
    components: {BorderBox, Preview},
    data() {
      return {
        defaultImgUrl: require('@/assets/default.png'),
        contentList: [1, 2],
        visible: false,
        columns: [
          {
            title: '标题名称',
            align: 'center',
            dataIndex: 'contentTitle',
          },
          {
            title: '副标题',
            align: 'center',
            dataIndex: 'contentSubTitle',
          },
          {
            title: '作者',
            align: 'center',
            dataIndex: 'authorName',
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime',
          },
          {
            title: '操作',
            dataIndex: '操作',
            width: '60px',
            scopedSlots: {customRender: '操作'},
          },
        ],
        url: {
          list: 'content/contentTemplate/templateList'
        },
      }
    },
    created() {
      this.loadFirstTwoData();
    },
    methods: {
      //请求前两条数据
      loadFirstTwoData() {
        getAction(this.url.list, {
          current: 1,
          pageSize: 2,
        }).then(res => {
          if (res.success) {
            this.contentList = res.result.records;
          }
        })
      },
      showPreview(item) {
        this.$refs.preview.show(item);
      },
      handleOk() {
        if (this.selectionRows && this.selectionRows.length > 0) {
          const content = this.selectionRows[0].content;
          this.insert(content);
        }
        this.visible = false;
      },
      insert(content) {
        this.$emit('insert', content);
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, .65);
    padding: 5px;
    border-radius: 8px;
    background-color: #f3f5f9;

    &-img {
      width: 150px;
      height: 90px;
      margin-right: 10px;
      border-radius: 8px;
    }

    &-title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      margin-bottom: 5px;
    }

    &-icons {
      text-align: right;
    }

    &-icons i {
      cursor: pointer;
      margin-right: 10px;
      font-size: 18px;
    }
  }
</style>
